/******************************** 通用媒介查询样式,适配样式 **********************/

/* 大屏幕(wed端) */
@media (min-width: 768px) {
  /* web端显示为block */
  .web-show {
    display: block !important;
  }

  /* web端显示为flex */
  .web-show-flex {
    display: flex !important;
  }

  /* web端显示为inline */
  .web-show-inline {
    display: inline !important;
  }

  /* web端显示为inline-block */
  .web-show-inline-block {
    display: inline-block !important;
  }

  /* web端显示为-webkit-box */
  .web-show-webkit-box {
    display: -webkit-box !important;
  }

  /* 手机端隐藏 */
  .phone-show,
  .phone-show-flex,
  .phone-show-inline,
  .phone-show-inline-block {
    display: none !important;
  }

  /* web端弹性布局 手机端内联块级元素 */
  .webFlex-phoneBlock {
    display: flex !important;
  }

  /* 手机端弹性布局 web端内联块级元素 */
  .phoneFlex-webInlineBlock {
    display: inline-block !important;
  }
  .phoneAlignCenter-webInlineBlock {
    display: inline-block !important;
  }
}

/* 小屏幕(手机端) */
@media screen and (max-width: 767px) {
  /* phone端显示为block */
  .phone-show {
    display: block !important;
  }

  /* phone端显示为flex */
  .phone-show-flex {
    display: flex !important;
  }

  .phone-show-flex-column {
    display: flex;
    flex-direction: column;
  }

  /* phone端显示为inline */
  .phone-show-inline {
    display: inline !important;
  }

  /* phone端显示为inline-block */
  .phone-show-inline-block {
    display: inline-block !important;
  }

  /* web端显示为-webkit-box */
  .web-show-webkit-box {
    display: none !important;
  }

  /* web端隐藏 */
  .web-show,
  .web-show-flex,
  .web-show-inline,
  .web-show-inline-block {
    display: none !important;
  }

  /* phone端显示列 */
  .phone-flex-column {
    flex-direction: column;
    align-items: flex-start;
  }

  /* web端弹性布局 手机端内联块级元素 */
  .webFlex-phoneBlock {
    display: block !important;
  }

  /* 手机端弹性布局 web端内联块级元素 */
  .phoneFlex-webInlineBlock {
    display: flex !important;
  }
  .phoneAlignCenter-webInlineBlock {
    display: flex !important;
    align-items: center;
  }

  /* 去掉padding,background */
  .phone-padding-background-none {
    padding: 0 !important;
    background: none !important;
  }
}
